<template>
  <div class="messageList">
    <div class="box">
      <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
        <a-breadcrumb separator=">">
          <a-breadcrumb-item href="" @click.native="$router.push('/')"
            >首页</a-breadcrumb-item
          >
          <a-breadcrumb-item
            v-if="from == 3"
            href=""
            @click.native="$router.push(homeUrl)"
          >
            {{ homeTxt }}
          </a-breadcrumb-item>
          <a-breadcrumb-item style="color: #ffbe37">{{ homeTxt == '科普列表'?'康复服务':homeTxt }}</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="tabs">
        <div class="dlex2-div" v-if="filterList.length" style="flex: 1">
          <p
            :class="item.code == code ? 'active' : ''"
            v-for="(item, index) in filterList"
            :key="index"
            @click="tabs(item.code)"
          >
            {{ item.name }}
          </p>
        </div>

        <div class="dlex2-div" style="width: 335px">
          <a-input
            style="width: 250px; height: 38px !important"
            v-model="msgons"
            placeholder="请输入关键字"
            class="searchInput"
          />
          <div
            class="searchIcon"
            style="padding: 11px; widtn: 70px; height: auto; width: auto"
            @click="search()"
          >
            <img style="width: 16px" src="@/assets/image/icon1.png" alt="" />
            <span>搜索</span>
          </div>
        </div>
      </div>
      <!-- 康复科普的样式 -->
      <div
        v-if="$route.query.type == '科普列表' && code != 2"
        class="center coRsingleCF"
      >
        <div
          class="listDiv dlex3-div"
          @click="goDetail(true,item.sprNo, '科普')"
          v-for="(item, i) in newsList"
          :key="i"
        >
          <div class="lleft"
              v-if="item.cover">
            <img
              :src="imageWebUrl + item.cover"
              @error="$event.target.src = GLOBAL.defaultCover"
              alt=""
            />
          </div>
          <div class="lright">
            <span class="ltxt1 multiline">{{ item.title }}</span>
            <div class="dlex2-div lsdiv">
              <!-- <span class="timeTxt2">发布：{{ item.publishDate }} </span> -->
              <span class="timeTxt2">来源：{{ item.source }} </span>
            </div>
            <div class="titleTxt6 multiline" v-html="item.abstracts"></div>
          </div>
        </div>
      </div>

      <!-- 其他样式 -->
      <div v-if="$route.query.type != '科普列表'">
        <ul
          class="messages"
          v-if="
            ($route.query.type == '新闻列表' || $route.query.type == '政策解读' ||
              $route.query.type == '创业列表') &&
            $route.query.type != '科普列表'
          "
        >
          <li
            v-for="(item, index) in newsList"
            :key="index"
            @click="goDetail(true, item.newsNo, $route.query.type=='创业列表'? '政策':$route.query.type)"
          >
            <div class="img" v-if="item.cover">
              <img
                :src="imageWebUrl + item.cover"
                @error="$event.target.src = GLOBAL.defaultCover"
                alt=""
                class="leftimg"
              />
            </div>
            <div class="rightCont">
              <p class="messTitle">{{ item.title }}</p>
              <div class="navmsg">
                <p>发布：{{ item.publishTime }}</p>
                <p>阅读量：{{ item.browseNum }}</p>
                <p>来源：{{ item.source }}</p>
              </div>
              <p class="content">{{ item.intro }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div
        class="listDiv1 knowledges"
        v-for="(item, index) in newsList"
        :key="index + 'sa'"
        v-show="$route.query.type == '科普列表' && code == 2"
      >
        <li>
          <div class="dlex2-div title">
            <div v-show="item.category != null" class="titlenav">
              <div>{{ item.category }}</div>
            </div>
            <p class="innertext">
              {{ item.title }}
            </p>
          </div>
          <div class="knowcontent">
            <div
              class="innercontent"
              :class="!item.checked ? '' : 'contentactive'"
              v-html="item.content"
            ></div>
            <div class="dlex2-div">
              <div style="flex: 1">
                <span class="titleTxt7"> 来源：{{ item.source }} </span>
              </div>
              <div v-if="item.content && item.content.length > 233">
                <div class="show" v-if="!item.checked" @click="show(index)">
                  <p>阅读全文</p>
                  <img src="@/assets/image/employment/bottom.png" alt="" />
                </div>
                <div class="show" v-if="item.checked" @click="show(index)">
                  <p>收起</p>
                  <img src="@/assets/image/employment/top.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </li>
      </div>
      <ul class="titleList coRsingleCF" :class="code != 1 && code != 1?'lifeList':''" v-if="$route.query.type == '事件列表'">
        <li
          v-for="(item, index) in newsList"
          :key="index"
          @click="
            goDetail(
              code != 1 && code != 2,
              $route.query.type == '科普列表' ? item.sprNo : item.lifeSafNo,
              $route.query.type == '科普列表' ? '康复科普' : '案例'
            )
          "
        >
          <p class="title">{{ item.title }}</p>
          <p
            v-show="item.content"
            class="contenttext"
            :class="!item.checked ? '' : 'contentactive'"
            v-html="item.content"
          ></p>
          <p
            v-show="item.abstracts"
            class="contenttext"
            :class="!item.checked ? '' : 'contentactive'"
            v-html="item.abstracts"
          ></p>
          <p class="time" v-show="item.createDate">{{ item.createDate }}</p>
          <p class="time" v-show="item.publishDate">{{ item.publishDate }}</p>
          <div class="flexDiv" v-if="(code == 2 || code == 1) && item.content.length > 200">
            <div style="flex: 1">
              <!-- <span class="titleTxt7"> 来源：{{ item.source }} </span> -->
            </div>
            <div v-if="(code == 2 || code == 1) && item.content.length > 230">
              <div class="show" v-if="!item.checked" @click="show(index)">
                <p>阅读全文</p>
                <img src="@/assets/image/employment/bottom.png" alt="" />
              </div>
              <div class="show" v-if="item.checked" @click="show(index)">
                <p>收起</p>
                <img src="@/assets/image/employment/top.png" alt="" />
              </div>
            </div>
          </div>
        </li>
      </ul>

      <!-- <div class="pagination" v-show="total > pageSize">
        <a-pagination
          :total="total"
          v-model="current"
          :pageSize="pageSize"
          @change="fontnbr"
          show-less-items
        />
      </div> -->
      <div class="bottom">
        <div class="cnBottom" v-if="newsList.length > 1">
          <div style="margin: 0 auto; width: 230px">
            <a-button @click="more()" v-show="btnState == 1" class="sobtn"
              >点击加载更多</a-button
            >
            <a-button v-show="btnState == 2" class="sobtn" :loading="true"
              >正在加载中</a-button
            >
            <span class="timeTxt1" style="text-align: center" v-if="btnState == 3"
              >没有更多了</span
            >
          </div>
        </div>
      </div>
      <a-empty
        :image="imgUrl"
        :image-style="{
          height: '220px',
        }"
        style="margin: 0 auto; margin-top: 88px"
        v-if="newsList.length < 1 && flag"
      />
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索关键字
      msgons: "",
      imgUrl: require("@/assets/image/pagint.png"),
      filterList: [],
      newsList: [],
      btnState: 1,
      current: 1,
      code: "",
      pageSize: 6,
      pageIndex: 1,
      total: 0,
      txtType: "",
      from: "",
      homeUrl: "",
      flag: false,
      onLoading:false
    };
  },
  computed: {
    homeTxt() {
      if (this.$route.query.type == "创业列表") {
        this.homeUrl = "/employment/home";
        return "创业就业";
      } else if (this.$route.query.type == "科普列表") {
        this.homeUrl = "/service";
        return "康复服务";
      } else if (this.$route.query.type == "事件列表") {
        this.homeUrl = "/safeguarding";
        return "生活维权";
      } else if (this.$route.query.type == "新闻列表") {
        this.homeUrl = "/";
        return "新闻资讯";
      } else if (this.$route.query.type == "政策解读") {
        this.homeUrl = "/";
        return "政策解读";
      }
    },
  },
  mounted() {
    this.from = this.$route.query.from;
    this.txtType = this.$route.query.type;
    if (this.$route.query.type == "新闻列表") {
      this.getCodeList(10);
    } else if (this.$route.query.type == "政策解读") {
      this.getPoliceFindList();
    } else if (this.$route.query.type == "创业列表") {
      this.getCodeList(12);
    } else if (this.$route.query.type == "科普列表") {
      this.filterList = [
        { code: "kp01", name: "康复科普" },
        { code: 2, name: "知识问答" },
      ];
      this.code = this.filterList[0].code;
      this.getSpreadList();
    } else if (this.$route.query.type == "事件列表") {
      this.filterList = [
        { code: "sj01", name: "真实案例" },
        { code: 1, name: "知识问答" },
      ];
      this.code = this.filterList[0].code;
      this.getlifesafeguardlist();
    }
  },
  methods: {
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      if (this.$route.query.type == "新闻列表") {
        this.getNewsList();
      } else if (
        this.$route.query.type == "科普列表" &&
        (this.code == 1 || this.code == 2)
      ) {
        this.getKnowledgeList();
      } else if (
        this.$route.query.type == "科普列表" &&
        this.code != 1 &&
        this.code != 2
      ) {
        this.getSpreadList();
      } else if (
        this.$route.query.type == "事件列表" &&
        (this.code == 1 || this.code == 2)
      ) {
        this.getKnowledgeList();
      } else if (
        this.$route.query.type == "事件列表" &&
        this.code != 1 &&
        this.code != 2
      ) {
        this.getlifesafeguardlist();
      } else if (this.$route.query.type == "创业列表") {
        this.getMsgInfoList();
      } else if (this.$route.query.type == "政策解读") {
        this.getPoliceFindList();
      }
    },
    // 搜索
    search() {
      this.flag = false;
      this.current = 1;
      this.pageIndex = 1;
      this.newsList = [];
      if (this.$route.query.type == "新闻列表") {
        this.getNewsList();
      } else if (
        this.$route.query.type == "科普列表" &&
        (this.code == 1 || this.code == 2)
      ) {
        this.getKnowledgeList();
      } else if (
        this.$route.query.type == "科普列表" &&
        this.code != 1 &&
        this.code != 2
      ) {
        this.getSpreadList();
      } else if (
        this.$route.query.type == "事件列表" &&
        (this.code == 1 || this.code == 2)
      ) {
        this.getKnowledgeList();
      } else if (
        this.$route.query.type == "事件列表" &&
        this.code != 1 &&
        this.code != 2
      ) {
        this.getlifesafeguardlist();
      } else if (this.$route.query.type == "创业列表") {
        this.getMsgInfoList();
      } else if (this.$route.query.type == "政策解读") {
        this.getPoliceFindList();
      }
    },

    // tab切换
    tabs(e) {
      this.flag = false;
      this.msgons = "";
      this.code = e;
      this.current = 1;
      this.pageIndex = 1;
      this.newsList = [];
      this.total = 0;
      if (this.$route.query.type == "新闻列表") {
        this.getNewsList();
      } else if (
        this.$route.query.type == "科普列表" &&
        (this.code == 1 || this.code == 2)
      ) {
        this.getKnowledgeList();
      } else if (
        this.$route.query.type == "科普列表" &&
        this.code != 1 &&
        this.code != 2
      ) {
        this.getSpreadList();
      } else if (
        this.$route.query.type == "事件列表" &&
        (this.code == 1 || this.code == 2)
      ) {
        this.getKnowledgeList();
      } else if (
        this.$route.query.type == "事件列表" &&
        this.code != 1 &&
        this.code != 2
      ) {
        this.getlifesafeguardlist();
      } else if (this.$route.query.type == "创业列表") {
        this.getMsgInfoList();
      }
    },
    // 展开收起
    show(e) {
      this.newsList[e].checked = !this.newsList[e].checked;
      // console.log(this.newsList[e].checked, e);
    },
    // 跳转详情页
    goDetail(flag, id, type) {
      if (flag) {
        this.$router.push(
          "/details/details?from=" +
            this.$route.query.from +
            "&id=" +
            id +
            "&type=" +
            type +
            "&pageId=首页"
        );
      }
    },
    // 获取新闻分类
    getCodeList(e) {
      this.onLoading = true
      this.$ajax({
        url: "/news/code/list/name?codeType=" + e,
        method: "post",
        params: {
          title: this.msgons,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false
          if (this.$route.query.type == "新闻列表") {
            this.filterList = res.data;
            this.code = res.data[0].code;
            this.getNewsList();
          } else if (this.$route.query.type == "创业列表") {
            //  this.filterList = res.data;
            this.code = res.data[0].code;
            this.getMsgInfoList();
          }
        }else{
          this.onLoading = false
        }
      });
    },
    // 获取政策库列表
    getPoliceFindList(){
      this.$ajax({
        url:"/news/policyfind/list/msg?pageSize=" +
          this.pageSize +
          "&pageIndex=" +
          this.pageIndex,
        method:"post",
        params: {
          title: this.msgons,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false
          this.total = res.data.totalCount;
          this.newsList.push(...res.data.list);
          // 判断查询数据的长度
          if (this.total <= this.pageSize*this.pageIndex) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        }else{
          this.onLoading = false
        }
      });
    },
    // 获取真实案例列表
    getlifesafeguardlist() {
      this.onLoading = true
      this.$ajax({
        url:
          "/news/lifesafeguard/list?pageSize=" +
          this.pageSize +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
        params: {
          title: this.msgons,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false
          this.total = res.data.totalCount;
          this.newsList.push(...res.data.list);
          // 判断查询数据的长度
          if (this.total <= this.pageSize*this.pageIndex) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        }else{
          this.onLoading = false
        }
      });
    },
    // 获取康复科普列表
    getSpreadList() {
      this.onLoading = true
      this.$ajax({
        url:
          "/news/healthspread/list?pageSize=" +
          this.pageSize +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
        dataType: "JSON",
        params: {
          title: this.msgons,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false
          this.total = res.data.totalCount;
          this.newsList.push(...res.data.list);
          // 判断查询数据的长度
          if (this.total <= this.pageSize*this.pageIndex) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        }else{
          this.onLoading = false
        }
      });
    },
    // 知识问答列表
    getKnowledgeList() {
      this.onLoading = true
      let ber = [];
      this.$ajax({
        url:
          "/news/knowqa/qaList?pageSize=" +
          this.pageSize +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
        dataType: "JSON",
        params: {
          localtion: this.code,
          title: this.msgons,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false
          this.total = res.data.totalCount;
          this.newsList.push(...res.data.list);
          // 为每个元素添加flag
          this.newsList.forEach((value, index) => {
            this.$set(value, "checked", false);
          });
          // 判断查询数据的长度
          if (this.total <= this.pageSize*this.pageIndex) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        }else{
          this.onLoading = false
        }
      });
    },
    // 创业就业列表
    getMsgInfoList() {
      // console.log(this.msgons);
      this.onLoading = true
      this.$ajax({
        url:
          "/news/msginfo/list/msg?msgType=" +
          this.code +
          "&pageSize=" +
          this.pageSize +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
        params: {
          title: this.msgons,
        },
      }).then((res) => {
        if(res.code == 200){
          this.onLoading = false
          this.flag = true;
          this.total = res.data.totalCount;
          this.newsList.push(...res.data.list);
          // 判断查询数据的长度
          if (this.total <= this.pageSize*this.pageIndex) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        }else{
          this.onLoading = false
        }
      });
    },
    // 列表
    getNewsList() {
      this.onLoading = true
      this.$ajax({
        url: "/news/newsmsg/list/news",
        method: "post",
        params: {
          title: this.msgons,
          sortNo: this.code,
          location: "01",
          modularlType: "01",
          pageSize: this.pageSize,
          pageIndex: this.pageIndex,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false
          this.total = res.data.totalCount;
          this.newsList.push(...res.data.list);
          // 判断查询数据的长度
          if (this.total <= this.pageSize*this.pageIndex) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        }else{
          this.onLoading = false
        }
      });
    },
    //分页
    fontnbr(e) {
      this.current = e;
      this.pageIndex = e;
      this.flag = false;
      if (this.$route.query.type == "新闻列表") {
        this.getNewsList();
      } else if (
        this.$route.query.type == "科普列表" &&
        (this.code == 1 || this.code == 2)
      ) {
        this.getKnowledgeList();
      } else if (
        this.$route.query.type == "科普列表" &&
        this.code != 1 &&
        this.code != 2
      ) {
        this.getSpreadList();
      } else if (
        this.$route.query.type == "事件列表" &&
        (this.code == 1 || this.code == 2)
      ) {
        this.getKnowledgeList();
      } else if (
        this.$route.query.type == "事件列表" &&
        this.code != 1 &&
        this.code != 2
      ) {
        this.getlifesafeguardlist();
      } else if (this.$route.query.type == "创业列表") {
        this.getMsgInfoList();
      }
    },
  },
};
</script>

<style scoped lang="less">
.pagination {
  text-align: center;
  margin: 20px 0;
}
.listDiv1 {
  width: 100%;
  padding: 24px;
  overflow: hidden;
  background-color: #ffffff;
  margin-top: 16px;
  p {
    font-size: 15px;
    font-family: PingFang SC;
    color: #666666;
    line-height: 28px;
  }
}
.knowledges {
  margin-top: 30px;
  li {
    .title {
      display: flex;
      .identification {
        font-size: 53px;
        line-height: 20px;
        color: #fb6d00;
        margin-right: 10px;
      }
      .innertext {
        color: #333333;
        font-size: 18px;
        line-height: 25px;
        font-weight: bold;
      }
    }
    .knowcontent {
      position: relative;
      margin-top: 22px;
      .dlex2-div {
        margin-top: 17px;
        padding-top: 17px;
        border-top: 1px solid #eeeeee;
        width: 100%;
        .titleTxt7 {
          display: inline-block;
        }
      }
      .innercontent {
        color: #333333;
        font-size: 15px;
        line-height: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; /*行数*/
        -webkit-box-orient: vertical;
      }
      .contentactive {
        -webkit-line-clamp: 10000;
      }
      .show {
        padding-left: 25px;
        bottom: 3px;
        background: #ffffff;
        display: flex;
        cursor: pointer;
        p {
          color: #0d4fae;
          font-size: 15px;
          line-height: 21px;
        }
        img {
          width: 20px;
          margin-left: 4px;
        }
      }
    }
  }
}
.messageList {
  background-color: #f8f8f8;
  // padding-top: 150px;
  min-height: calc(100vh - 254px);
  .box {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
  }
  .tabs {
    width: 1200px;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 62px;
    padding: 0 24px;
    background-color: #ffffff;
    margin-bottom: 20px;
    p {
      margin-right: 50px;
      color: #000000;
      font-size: 16px;
      line-height: 22px;
      cursor: pointer;
    }
    .active {
      color: #ffbe37;
      font-weight: 600;
    }
  }
  .lifeList{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li{
      width: 49%;
    }
  }
  .titleList {
    li {
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      padding: 24px;
      background-color: #ffffff;
      // margin-right: 20px;
      margin-bottom: 20px;
      position: relative;
      .title {
        color: #333333;
        font-size: 18px;
        font-weight: bold;
        line-height: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .contenttext {
        width: 1136px;
        margin-top: 16px;
        color: #999999;
        font-size: 15px;
        line-height: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; /*行数*/
        -webkit-box-orient: vertical;
      }
      .time {
        color: #333333;
        font-size: 14px;
        line-height: 14px;
        margin-top: 16px;
      }
      .contentactive {
        -webkit-line-clamp: 10000;
      }
      .flexDiv{
        display: flex;
        border-top: 1px solid #eeeeee;
        margin-top: 16px;
        height: 30px;
        .show{
          display: flex;
          align-items: center;
          p{
            line-height: 50px;
            color: #0d4fae;
            font-size: 15px;
          }
          img{
            width: 17px;
            height: 17px;
          }
        }
      }
      // div {
      //   position: absolute;
      //   bottom: 10px;
      //   right: 20px;
      //   .show {
      //     position: absolute;
      //     right: 0;
      //     width: 115px;
      //     padding-left: 25px;
      //     bottom: 0px;
      //     background: #ffffff;
      //     display: flex;
      //     cursor: pointer;
      //     p {
            // color: #0d4fae;
            // font-size: 15px;
            // line-height: 21px;
      //     }
      //     img {
      //       width: 20px;
      //       margin-left: 4px;
      //     }
      //   }
      // }
    }
  }
  .messages {
    li {
      cursor: pointer;
      display: flex;
      background-color: #ffffff;
      padding: 25px 30px;
      border-bottom: 1px solid #eeeeee;
      margin-bottom: 24px;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
      .img {
        width: 196px;
        height: 120px;
        overflow: hidden;
        margin-right: 32px;
        img {
          width: 100%;
          height: 100%;
          transition: transform 0.5s linear;
        }
      }
      .img:hover {
        img {
          transform: scale(1.1);
        }
      }
      .rightCont {
        flex: 1;
        padding: 0 18px 0 0;
        .messTitle {
          color: #333333;
          font-size: 18px;
          line-height: 25px;
          font-weight: bold;
          padding-top: 5px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .navmsg {
          margin-top: 8px;
          display: flex;
          p {
            margin-right: 56px;
            color: #666666;
            font-size: 13px;
            line-height: 18px;
          }
        }
        .content {
          margin-top: 16px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          color: #000000;
          font-size: 15px;
          line-height: 21px;
        }
      }
    }
    li:last-child {
      border: 0;
      margin-bottom: 0;
    }
  }
}

// 属于康复科普的列表
.center {
  .listDiv {
    margin-top: 20px;
    width: 590px;
    margin-left: 20px;
    background: #ffffff;
    padding: 24px 25px;
    cursor: pointer;
    float: left;

    .lleft {
      margin-right: 24px;
      width: 196px;
      height: 120px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .lright {
      flex: 1;
      overflow: hidden;
    }
    .ltxt1 {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333333;
      -webkit-line-clamp: 1;
    }
    .lsdiv {
      margin-top: 16px;
      margin-bottom: 8px;
    }
    .titleTxt7 {
      margin: 16px 0;
      -webkit-line-clamp: 3;
      line-height: 28px;
    }
  }
  .listDiv:nth-child(2n-1) {
    margin-left: 0px;
  }
}
.titleTxt6 {
  margin-top: 16px;
  -webkit-line-clamp: 2;
  line-height: 20px;
  /deep/span {
    font-size: 15px !important;
    font-family: PingFang SC !important;
    line-height: 25px !important;
    white-space: pre;
  }
  /deep/p {
    font-size: 15px !important;
    font-family: PingFang SC !important;
    line-height: 25px !important;
  }
}
</style>
